import { Button, DatePicker, Descriptions, Input, message } from "antd";
import Layout from "../Shared/Layout";
import { useCallback, useEffect, useState } from "react";
import { getParams, request } from "../../Api/api";
import MyButton from "../../Components/MyButton";
import dayjs from "dayjs";
import SelectTestPaper from "../../Components/Operation/Exam/SelectTestPaper";
const ExamArrangeDetail = () => {
  const [exam, setExam] = useState({});
  const [isUpdating, setIsUpdating] = useState(false);
  const [updatingExam, setUpdatingExam] = useState({});
  const [open, setOpen] = useState(false);
  const bind = useCallback(async () => {
    const id = getParams("id");
    const res = await request("/exam/detail", { id }, "GET");
    if (res.code >= 0) {
      setExam(res.data);
    }
  }, []);
  useEffect(() => {
    async function fetchData() {
      bind();
    }
    fetchData();
  }, [bind]);
  const items = [
    {
      label: "名称",
      children: (
        <>
          {!isUpdating ? (
            exam.name
          ) : (
            <Input
              value={updatingExam.name}
              onChange={(e) =>
                setUpdatingExam({ ...updatingExam, name: e.target.value })
              }
            />
          )}
        </>
      ),
    },
    {
      label: "试卷",
      children: (
        <>
          {!isUpdating ? (
            exam.testPaperName
          ) : (
            <div>
              <Button onClick={() => setOpen(true)}>选择试卷</Button>
              <span>{updatingExam.testPaperName}</span>
            </div>
          )}
        </>
      ),
    },
    {
      label: "开始时间",
      children: (
        <>
          {!isUpdating ? (
            new Date(exam.beginTime).toLocaleString()
          ) : (
            <DatePicker
              showTime={true}
              value={dayjs(updatingExam.beginTime)}
              onChange={(e) =>
                setUpdatingExam({ ...updatingExam, beginTime: e.$d })
              }
            />
          )}
        </>
      ),
    },
    {
      label: "结束时间",
      children: (
        <>
          {!isUpdating ? (
            new Date(exam.endTime).toLocaleString()
          ) : (
            <DatePicker
              showTime={true}
              value={dayjs(updatingExam.endTime)}
              onChange={(e) => {
                console.log(e);
                setUpdatingExam({ ...updatingExam, endTime: e.$d });
              }}
            />
          )}
        </>
      ),
    },
    {
      label: "备注",
      children: (
        <>
          {!isUpdating ? (
            exam.explain
          ) : (
            <Input.TextArea
              value={updatingExam.explain}
              onChange={(e) =>
                setUpdatingExam({ ...updatingExam, explain: e.target.value })
              }
            />
          )}
        </>
      ),
    },
  ];
  const toUpdate = () => {
    setUpdatingExam(exam);
    setIsUpdating(true);
  };
  const update = async () => {
    const res = await request(
      "/exam/update",
      {
        ...updatingExam,
        beginTime: new Date(updatingExam.beginTime).toISOString(),
        endTime: new Date(updatingExam.endTime).toISOString(),
      },
      "POST"
    );
    if (res.code >= 0) {
      message.success(res.message);
      setIsUpdating(false);
      bind();
    } else {
      message.error(res.message);
    }
  };
  return (
    <Layout>
      <SelectTestPaper
        open={open}
        onCancel={() => setOpen(false)}
        onOk={(testPaper) => {
          setUpdatingExam({
            ...updatingExam,
            testPaperId: testPaper.id,
            testPaperName: testPaper.name,
          });
          setOpen(false);
        }}
      />
      <Descriptions
        column={2}
        title="考试安排详情"
        layout="vertical"
        bordered={true}
        items={items}
        extra={
          !isUpdating ? (
            <>
              <MyButton type="warning" onClick={toUpdate}>
                修改
              </MyButton>
            </>
          ) : (
            <>
              <MyButton onClick={() => setIsUpdating(false)}>取消</MyButton>
              <MyButton type="primary" onClick={update}>
                保存
              </MyButton>
            </>
          )
        }
      />
    </Layout>
  );
};

export default ExamArrangeDetail;
